<template>
	<div>
		<zh-row :span="24">
			<zh-col>
				<zh-card title="">
					<zh-form ref="roleFrom" :model="state.queryUserParam">
						<zh-form-select
							v-model="state.queryUserParam.searchType"
							label="查询类型"
							:options="state.searchTypeData"
							prop="searchType"
							placeholder="默认查询未授权用户"
							@change="searchTypeChange"
						>
						</zh-form-select>
						<zh-form-input label="姓名" v-model="state.queryUserParam.fullName" prop="fullName" placeholder="支持模糊查询" />
						<template v-if="state.advanced">
							<zh-form-input label="用户名" v-model="state.queryUserParam.userName" prop="userName" placeholder="支持模糊查询" />
							<zh-form-select
								placeholder="请搜索，支持多选"
								prop="orgIds"
								funcCode="org0001"
								label="所属组织"
								searchField="orgName"
								:fieldNames="{
									label: 'orgName',
									value: 'orgId',
								}"
								:lazy="true"
								mode="multiple"
								v-model="state.queryUserParam.orgIds"
							>
							</zh-form-select>
							<zh-form-select
								prop="status"
								label="状态"
								placeholder="单选"
								:options="state.statusData"
								v-model="state.queryUserParam.status"
							></zh-form-select>
							<zh-form-select
								prop="userTypeList"
								label="用户类型"
								v-model="state.queryUserParam.userTypeList"
								mode="multiple"
								placeholder="支持多选"
								:options="state.dictData.userType"
							>
							</zh-form-select>
						</template>
						<zh-form-query v-model="state.advanced" :formRef="roleFrom" :table-ref="userListTable"></zh-form-query>
					</zh-form>
				</zh-card>
			</zh-col>
			<zh-col>
				<zh-table
					ref="userListTable"
					title="用户列表"
					:rowConfig="{ keyField: 'userId' }"
					funcCode="role0008"
					:columns="state.userColumn"
					:disabled="false"
				>
					<template #fixed_default="{ row }">
						<zh-badge v-if="state.queryUserParam.searchType!=='1'" :status="flagMap[row.fixed].status" :text="flagMap[row.fixed].text" />
						<zh-select v-if="state.queryUserParam.searchType==='1'" v-model="row.fixed" :options="state.fixedDict" :disabled="props.roleInfo.fixed!=='1'"></zh-select>
					</template>
					<template #status_default="{ row }">
						<zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
					</template>
				</zh-table>
			</zh-col>
		</zh-row>
	</div>
</template>

<script lang="ts" setup name="RouterUserManager">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	roleInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
});
const emit = defineEmits(['roleUserBtn']);

//------------------定义子组件---------------------------
const roleFrom = ref<any>({});
const userListTable = ref<any>({});

//------------------内部变量定义-------------------------
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'success',
		text: '启用',
	},
};
const flagMap = {
	0: {
		status: 'error',
		text: '否',
	},
	1: {
		status: 'processing',
		text: '是',
	},
};
const state = reactive({
	description: '角色授权用户界面',
	fixedDict: [
		{ dictKey: '0', dictValue: '否' },
		{ dictKey: '1', dictValue: '是' },
	],
	// 高级搜索 展开/关闭
	advanced: false,
	dictData: [] as any,
	orgSelectTreeData: [],
	// 用户查询条件
	queryUserParam: {
		searchType: '1',
		userName: undefined,
		orgIds: undefined,
		fullName: undefined,
		status: undefined,
		userTypeList: ['10'],
		roleId: undefined,
	} as any,
	// 角色id
	roleId: null,
	statusData: [
		{ dictKey: '1', dictValue: '启用' },
		{ dictKey: '0', dictValue: '禁用' },
	],
	searchTypeData: [
		{ dictKey: '1', dictValue: '从未授权用户' },
		{ dictKey: '2', dictValue: '已授权用户' },
		{ dictKey: '3', dictValue: '全部' },
	],
	// 用户列表参数
	userColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'userId', title: '用户Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'userName', title: '用户名', fixed: 'left', align: 'center', width: 150 },
		{ field: 'fullName', title: '姓名', align: 'center', width: 150 },
		{
			field: 'fixed',
			title: '角色可编辑',
			align: 'center',
			width: 120,
			slots: {
				default: 'fixed_default',
				// ({ row }) => {
				// 	return state.setFlag(row);
				// },
			},
		},
		{ field: 'orgName', title: '所属组织', align: 'center', showOverflow: true, width: 300 },
		{ field: 'userType', title: '用户类型key', visible: false, align: 'center', width: 150 },
		{ field: 'userTypeName', title: '用户类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
				// ({ row }) => {
				// 	return state.setStatus(row);
				// },
			},
		},
		{ field: 'email', title: '电子邮箱', align: 'center', showOverflow: true, width: 150 },
		{ field: 'cellphone', title: '手机', align: 'center', width: 100 },
		{ field: 'idcard', title: '身份证', align: 'center', width: 150 },
		{ field: 'address', title: '地址', align: 'center', showOverflow: true, width: 200 },
		{ field: 'officePhone', title: '办公室电话', align: 'center', width: 100 },
		{ field: 'shortPhone', title: '短号', align: 'center', width: 60 },
		{ field: 'orgId', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
		{ field: 'superiorsName', title: '直接上级', align: 'center', width: 150 },
		{ field: 'regdate', title: '创建日期', align: 'center', width: 80 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 },
	],
});

//------------------定义调用方法-------------------------
function findUserList() {
	if (state.roleId) {
		userListTable.value.query(state.queryUserParam);
	} else {
		$messageBox.warning('没有传入角色id', '提示');
	}
}
function searchTypeChange(value) {
	findUserList();
	emit('roleUserBtn', value);
	setTimeout(() => {
		// state.userChecked = []
		userListTable.value.clearCheckboxRow();
		userListTable.value.clearCheckboxReserve();
	}, 50);
}
function clearUserChecked() {
	userListTable.value.clearCheckboxRow();
	userListTable.value.clearCheckboxReserve();
}

function saveUser(roleId) {
	const users = userListTable.value.getAllCheckboxRecords();
	if (users) {
		if (users.length <= 0) {
			$messageBox.warning('请先勾选需要授权的用户', '提示');
			return false;
		}
	} else {
		$messageBox.warning('请先勾选需要授权的用户', '提示');
		return false;
	}
	const roleFixedVOList = [] as any[];
	users.forEach((item) => {
		let obj = {
			userId: item.userId,
			fixed: item.fixed,
		};
		roleFixedVOList.push(obj);
	});
	const params = {
		roleId: roleId,
		roleFixedVOList: roleFixedVOList,
	};
	setTimeout(() => {
		$api.common.send
			.post('role0009', params)
			.then(() => {
				$messageBox.success('授权成功', '提示');
				findUserList();
				clearUserChecked();
			})
			.catch(() => {});
	}, 10);
}
function deleteUser(selectRow) {
	if (selectRow) {
		const checkedUser = userListTable.value.getAllCheckboxRecords();
		if (checkedUser && checkedUser.length > 0) {
			const userIds = [] as any[];
			checkedUser.forEach((item) => {
				userIds.push(item.userId);
			});
			const params = {
				userIds: userIds,
				roleId: selectRow.roleId,
			};
			setTimeout(() => {
				$api.common.send
					.post('role0010', params)
					.then(() => {
						$messageBox.success('删除成功', '提示');
						findUserList();
						clearUserChecked();
					})
					.catch(() => {});
			}, 10);
		} else {
			$messageBox.warning('请先勾选需要删除的用户', '提示');
		}
	} else {
		$messageBox.warning('请先选择需要操作的角色', '提示');
	}
}

//------------------初始化------------------------------
if (props.roleInfo) {
	state.roleId = props.roleInfo.roleId;
	state.queryUserParam.roleId = props.roleInfo.roleId;
} else {
	state.roleId = null;
}
const initDict = () => {
	const params = {
		dictFields: 'userType',
	};
	$api.common.getBatchDict.post(params).then((res) => {
		state.dictData = res.result;
	});
};

onMounted(() => {
	nextTick(() => {
		initDict();
		findUserList();
	});
});

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ findUserList, clearUserChecked, saveUser, deleteUser });
</script>
